import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Card, Col, Input, Row } from "antd";
import * as React from "react";
import { IfilterParam, listOne } from "../type/CommonData";
import FilterHurdle from "./FilterHurdle";

const styles = (theme: Theme) =>
  createStyles({
    root: {
      "& button": {
        borderColor: "#ff9600",
        backgroundColor: "#ff9600"
      }
    }
  });
interface Iprops extends WithStyles<typeof styles> {
  arrayOne: listOne[];
  arrayTwo: listOne[];
  filterOne: string;
  filterTwo: string;
  title?: string;
  Placeholder: string;
  filterCallback: (param: IfilterParam) => void;
}

class SearchAndFilter extends React.Component<Iprops> {
  public params: IfilterParam = {
    filterOne: null,
    filterTwo: null,
    searchParam: null
  };
  public queryByCondOne = (param: string | null) => {
    this.params.filterOne = param;
    this.props.filterCallback(this.params);
  };
  public queryByCondTwo = (param: string | null) => {
    this.params.filterTwo = param;
    this.props.filterCallback(this.params);
  };
  public serchButton = (value: any, e: any) => {
    this.params.searchParam = value;
    this.props.filterCallback(this.params);
  };
  public render() {
    const { classes } = this.props;
    return (
      <Card hoverable={true} className={classes.root}>
        <Row>
          <Row type={"flex"} justify={"start"}>
            <Col span={18} style={{ fontSize: "14px" }}>
              {<h3>{this.props.title ? this.props.title : ""}</h3>}
            </Col>
            <Col span={6}>
              <Input.Search
                style={{
                  backgroundColor: "#ff9600",
                  border: "1px solid #ff9600",
                  borderRadius: "5px"
                }}
                onSearch={this.serchButton}
                size={"default"}
                placeholder={this.props.Placeholder}
                enterButton={true}
              />
            </Col>
          </Row>
          <FilterHurdle
            filterParam={this.props.arrayOne}
            filterTitle={this.props.filterOne}
            valueCallback={this.queryByCondOne}
          />
          <FilterHurdle
            filterParam={this.props.arrayTwo}
            filterTitle={this.props.filterTwo}
            valueCallback={this.queryByCondTwo}
          />
        </Row>
      </Card>
    );
  }
}

export default withStyles(styles)(SearchAndFilter);
